<!-- 审批界面：用于 bpm 工作流 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '审批'
  }
}
</route>

<template>
  <view class="h-full w-full flex flex-col justify-center items-center">
    <view class="h-full w-full sticky top-0 z-10">
      <!-- tabs 切换 -->
      <wd-tabs @change="onTabsChange" color="#2a6be5ca">
        <block v-for="(item, index) in state.tabs" :key="index">
          <wd-tab
            :title="index === 0 ? `${item} (${state.toDoSum})` : `${item}`"
            :name="item"
          />
        </block>
      </wd-tabs>
      <view class="h-full w-full">
        <wd-search
          v-model="state.search.keyword"
          :placeholder="
            state.tabIndex < 2 ? '请输入任务名称' : '请输入流程名称'
          "
          @search="search"
          @clear="clear"
          @cancel="cancel"
          maxlength="10"
          placeholder-left
          cancel-txt="筛选"
        />
      </view>
    </view>
    <view>
      <TodoList :pagination="state.pagination" v-if="state.tabIndex === 0" />
      <DoneList :pagination="state.pagination" v-if="state.tabIndex === 1" />
      <CopyList :pagination="state.pagination" v-if="state.tabIndex === 2" />
      <MyTaskList :pagination="state.pagination" v-if="state.tabIndex === 3" />
      <wd-status-tip
        v-if="state.pagination.total === 0"
        image="/static/images/empty.png"
        tip="没有相应流程"
      />
    </view>
    <wd-loadmore
      v-if="state.pagination.total > 0"
      :state="state.loadStatus"
      @reload="loadMore"
    />
  </view>
  <wd-popup
    v-model="state.showPopup"
    position="bottom"
    :safe-area-inset-bottom="true"
    custom-style="height: 250px; display: flex; flex-direction: column; justify-content: space-between;padding:20px 5px 100px 5px;"
    @close="handleClose9"
  >
    <view>
      <wd-datetime-picker
        v-if="state.tabIndex === 0 || state.tabIndex === 1"
        label="创建时间"
        v-model="state.search.taskPeriod"
        size="large"
        @confirm="handleConfirmPeriod"
      />
      <wd-datetime-picker
        v-if="state.tabIndex === 2"
        label="抄送时间"
        v-model="state.search.taskPeriod"
        size="large"
        @confirm="handleConfirmPeriod"
      />
      <wd-datetime-picker
        v-if="state.tabIndex === 3"
        label="发起时间"
        v-model="state.search.taskPeriod"
        size="large"
        @confirm="handleConfirmPeriod"
      />
      <wd-picker
        v-if="state.tabIndex === 3"
        :columns="getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
        label="流程状态"
        v-model="state.search.processStatus"
        @confirm="handleConfirmStatus"
        size="large"
      />
      <wd-picker
        v-if="state.tabIndex === 3"
        :columns="state.categoryList"
        label="流程分类"
        v-model="state.search.processClass"
        @confirm="handleConfirmClass"
        size="large"
      />
    </view>
    <view><wd-button block @click="search">筛选</wd-button></view>
  </wd-popup>
</template>

<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import TodoList from './components/TodoList.vue'
import DoneList from './components/DoneList.vue'
import CopyList from './components/CopyList.vue'
import MyTaskList from './components/MyTaskList.vue'
import {
  getCategorySimpleList,
  CategoryVO
} from '@/service/category/CategoryApi'
import {
  getProcessInstanceCopyPage,
  getProcessInstanceMyPage,
  getTaskDonePage,
  getTaskTodoPage
} from '@/service/task/TaskApi'
import _ from 'lodash'
import { formatTimestamps } from '@/utils/dateUtil'
const state = reactive({
  tabs: ['待办', '已办', '抄送我', '已发送'], // tabs的标题
  tabIndex: 0, // tabs的索引
  toDoSum: 0, // tabs的待办流程总数
  showPopup: false, // 筛选弹窗控制
  categoryList: [], // 流程分类列表
  search: {
    keyword: '', // 关键词
    processStatus: undefined, // 流程状态的索引
    processClass: undefined, // 流程分类的索引
    taskPeriod: [] // 流程所在时间范围
  },
  pagination: {
    list: [],
    total: 0,
    pageNo: 1,
    pageSize: 6
  }, // 流程列表
  loadStatus: ''
})
// 选中tab
function onTabsChange(e: { index: number }) {
  state.tabIndex = e.index
  paginationNull()
  keywordNull()
  loadDataAccordingToTab()
}
// 重头加载代码
function paginationNull() {
  state.pagination.list = []
  state.pagination.total = 0
  state.pagination.pageNo = 1
  state.pagination.pageSize = 6
}
// 初始化搜索信息
function keywordNull() {
  state.search.keyword = ''
  state.search.processClass = undefined
  state.search.processStatus = undefined
  state.search.taskPeriod = []
}
// 根据tab加载数据
function loadDataAccordingToTab() {
  switch (state.tabIndex) {
    case 0:
      getTaskTodoList()
      break
    case 1:
      getTaskDoneList()
      break
    case 2:
      getProcessInstanceCopyList()
      break
    case 3:
      getProcessInstanceMyList()
      break
  }
}
// 设置加载状态
function setLoadingStatus() {
  state.loadStatus = 'loading'
}
// 更新分页信息
function updatePagination(data: { list: any[]; total: number }) {
  state.pagination.list = _.concat(state.pagination.list, data.list)
  state.pagination.total = data.total
  state.loadStatus =
    state.pagination.list.length < state.pagination.total ? '' : 'finished'
}

// 获取待办流程列表
const getTaskTodoList = async () => {
  setLoadingStatus()
  const data = await getTaskTodoPage({
    pageNo: state.pagination.pageNo,
    pageSize: state.pagination.pageSize,
    name: state.search.keyword,
    createTime: formatTimestamps(state.search.taskPeriod)
  })
  updatePagination(data)
  state.toDoSum = data.total
}

// 获取已办流程列表
const getTaskDoneList = async () => {
  setLoadingStatus()
  const data = await getTaskDonePage({
    pageNo: state.pagination.pageNo,
    pageSize: state.pagination.pageSize,
    name: state.search.keyword,
    createTime: formatTimestamps(state.search.taskPeriod)
  })
  updatePagination(data)
}

// 获取抄送我的流程列表
const getProcessInstanceCopyList = async () => {
  setLoadingStatus()
  const data = await getProcessInstanceCopyPage({
    pageNo: state.pagination.pageNo,
    pageSize: state.pagination.pageSize,
    processInstanceName: state.search.keyword,
    createTime: formatTimestamps(state.search.taskPeriod)
  })
  updatePagination(data)
}

// 获取已发起流程列表
const getProcessInstanceMyList = async () => {
  setLoadingStatus()
  const data = await getProcessInstanceMyPage({
    pageNo: state.pagination.pageNo,
    pageSize: state.pagination.pageSize,
    name: state.search.keyword,
    category: state.search.processClass,
    status: state.search.processStatus,
    createTime: formatTimestamps(state.search.taskPeriod)
  })
  updatePagination(data)
}

// 加载更多
function loadMore() {
  if (state.loadStatus === 'finished') {
    return
  }
  state.pagination.pageNo++
  loadDataAccordingToTab()
}
// 获取流程分类列表
const getCategoryList = async () => {
  const data = await getCategorySimpleList()

  // todo 可以做个专门适配的钩子函数
  // 转换为该ui组件选取器的属性
  data.forEach((category: CategoryVO) => {
    state.categoryList.push({
      label: category.name,
      value: category.code
    })
  })
}
function search() {
  paginationNull()
  loadDataAccordingToTab()
  state.showPopup = false
}
function cancel() {
  state.showPopup = true
}

onLoad(() => {
  getTaskTodoList()
  getCategoryList()
})
onReachBottom(() => {
  loadMore()
})
</script>
<style lang="scss" scoped></style>
